import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';
import { history } from 'umi';

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key?: React.Key | null,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem('首页', '/welcome', <AppstoreOutlined />),
  getItem('UI', 'ui', <MailOutlined />, [
    getItem('按钮', '/ui/buttons'),
    getItem('弹框', '/ui/modals'),
    getItem('轮播图', '/ui/banner'),
  ]),
  getItem('表单', '/form', <AppstoreOutlined />, [
    getItem('登录', '/form/login'),
    getItem('注册', '/form/reg'),
  ]),
  getItem('表格', '/table', <AppstoreOutlined />, [
    getItem('基础表格', '/table/basic'),
  ]),
  getItem('城市管理', '/city', <AppstoreOutlined />),
  getItem('地图', '/bikeMap', <AppstoreOutlined />),
  getItem('图标', '/charts', <AppstoreOutlined />),
  getItem('富文本', '/rich', <AppstoreOutlined />),
];

const onClick: MenuProps['onClick'] = (e) => {
  // console.log('click', e);
  history.push('/admin' + e.key);
};

export default () => (
  <Menu onClick={onClick} theme="dark" mode="vertical" items={items} />
);
